<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>基本使用</h2>
            <button class="btn btn-primary">发送get请求</button>
            <button class="btn btn-warning">发送post请求</button>
            <button class="btn btn-success">发送put请求</button>
            <button class="btn btn-danger">发送delete请求</button>
        </div>
        <script>
            console.log(axios);
            // 获取按钮
            const btn = document.querySelectorAll("button");

            // 使用全局的axios和对应的配置在进行网络请求
            // 设置默认类型
            axios.defaults.method = "GET";//设置默认的请求类型为get
            axios.defaults.baseURL = "http://127.0.0.1:3000";//设置基础url
            axios.defaults.params = {id:100};
            axios.defaults.timeout = 3000;//3秒钟  数据没有返回  取消这个请求

            btn[0].onclick = function(){
                axios.request({
                    url:"/posts"
                }).then(response => {
                    console.log(response);        
                    
                });
            }
        </script>
    </body>
</html>